<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{ message }}
			<div>
				<h1>下一行反转</h1>
				{{reversedMessage}}
			</div>
			<p>{{ obj.foo }}</p>
			<!-- 这里的 `foo` 不会更新！ -->
			<button v-on:click="obj.foo = 'baz'">Change it</button>
		</div>
		<div id="app-2">
			<span v-bind:title="message">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>
		<div id="app-3">
			<p v-if="seen">现在你看到我了</p>
		</div>
		<div id="app-4">
			<ol>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ol>
		</div>
		<div id="app-5">
			<p>{{ message }}</p>
			<button v-on:click="reverseMessage">反转消息</button>
		</div>
		<div id="app-6">
			<p>{{ message }}</p>
			<input v-model="message" />
		</div>
		<div id="app-7">
			<ol>
				<!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
				<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
			</ol>
		</div>
	</body>
	<script type="text/javascript">
		// //组件定义必须在vue实例之前
		// Vue.component('todo-item', {
		// 	props:['todo'],
		// 	template: '<li>{{todo.text}}</li>'
		// });
		// 
		var data = {
			foo: 'bar',
			a: 1
		}

		//Object.freeze(obj)

		var vm = new Vue({
			el: '#app',
			data: {
				message: 'hello vue',
				obj: data
			},
			computed: {
				// 计算属性的 getter
				reversedMessage: function() {
					// `this` 指向 vm 实例
					return this.message.split('').reverse().join('')
				}
			}
		});
		vm.$data === data // => true
		vm.$el === document.getElementById('example') // => true

		// $watch 是一个实例方法
		vm.$watch('a', function(newValue, oldValue) {
			// 这个回调将在 `vm.a` 改变后调用
		});

		var app2 = new Vue({
			el: '#app-2',
			data: {
				message: 'hello vue2' + new Date().toLocaleString()
			}
		})
		var app3 = new Vue({
			el: '#app-3',
			data: {
				seen: true
			}
		})
		var app4 = new Vue({
			el: '#app-4',
			data: {
				todos: [{
						text: "学习java"
					},
					{
						text: "学习c#"
					}
				]
			}
		});
		var app5 = new Vue({
			el: '#app-5',
			data: {
				message: "hello vue"
			},
			methods: {
				reverseMessage: function() {
					this.message = this.message.split('').reverse().join('');
				}
			}
		});
		var app6 = new Vue({
			el: '#app-6',
			data: {
				message: "hello vue"
			},
			methods: {
				reverseMessage: function() {
					this.message = this.message.split('').reverse().join('');
				}
			}
		});

		Vue.component('todo-item', {
			props: ['todo'],
			template: '<li>{{ todo.text }}</li>'
		});

		var app7 = new Vue({
			el: '#app-7',
			data: {
				groceryList: [{
						id: 0,
						text: '蔬菜'
					},
					{
						id: 1,
						text: '奶酪'
					},
					{
						id: 2,
						text: '随便其它什么人吃的东西'
					}
				]
			}
		});
		var vm = new Vue({
			data: {
				a: 1
			},
			created: function() {
				// `this` 指向 vm 实例
				console.log('a is: ' + this.a)
			}
		})
		// => "a is: 1"
	</script>
</html>
